<!DOCTYPE html>
<html>
  <head>
    <link href="http://google-code-prettify.googlecode.com/svn/trunk/src/prettify.css" type="text/css" rel="stylesheet"/>
    <link rel="stylesheet" href="animation_examples.css" type="text/css"/>
    <style type="text/css">
#contents #playground {
  width: 600px;
  height: 600px;
  margin-left: auto;
  margin-right: auto;
  border: 1px black solid;
  margin-top: 20px;
  margin-bottom: 20px;
  position: relative;
}

#hitTarget {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0px;
  left: 0px;
  z-index: 3;
}

.corner {
  position: absolute;
  height: 60px;
  width: 60px;
  background-color: rgb(255, 230, 230);
  z-index: 2;
}

#topleft {
  top: 0px;
  left: 0px;
}

#topright {
  top: 0px;
  right: 0px;
}

#bottomleft {
  bottom: 0px;
  left: 0px;
}

#bottomright {
  bottom: 0px;
  right: 0px;
}

#animation {
  position: absolute;
  height: 80px;
  width: 80px;
  top: 20px;
  left: 20px;
  background-color: rgb(200, 200, 255);
  line-height: 80px;
  text-align: center;
  font-size: 20px;
  -webkit-transform: scale(1);
  z-index: 4;
}
    </style>
    <style type="text/excss" id="animation-style">
#animation[position] {
  state-position: attr(position);
}

@transition-graph #animation {
  over: state-position;
  @edge(*, *) {animation: transition(left, top) 0.5s; }
  @edge(*, 60-60) {animation: return-to-base 1s; }
  @edge(540-540, *) {animation: there-and-back-again 1s;}
  @edge(540-60, 60-60) {animation: long-return-to-base 3s; }
  @edge(60-540, 540-60) {animation: across-the-middle 1s; }
  @node(540-60) { top: 20px; left: 500px; }
}

@keyframes return-to-base {
  from { top: from(); left: from(); -webkit-transform: scale(1) rotate(0deg); }
  50% { -webkit-transform: scale(1.5) rotate(40deg); }
  to { top: to(); left: to(); -webkit-transform: scale(1) rotate(0deg); }
}

@keyframes long-return-to-base {
  from { top: from(); left: from(); }
  33% { top: 500px; left: 500px; }
  66% { top: 500px; left: 20px; }
  to { top: to(); left: to(); }
}

@keyframes across-the-middle {
  from { top: from(); left: from(); -webkit-transform: rotate(0deg); }
  to { top: to(); left: to(); -webkit-transform: rotate(720deg); }
}

@keyframes there-and-back-again {
  from { top: from(); left: from(); }
  33% { top: to(); left: to(); }
  66% { top: from(); left: from(); }
  to { top: to(); left: to(); }
}
    </style>
  </head>
  <body>
    <div id="invisible" style="position:fixed;top:0;width:0;height:0;"></div>

    <div id="topbar"></div>
    <div id="container">
    <section id="contents">
      <header>
        CSS Transitions extension - generic paths
      </header>

      <p>This example illustrates using wildcards for @edge from- and to-
values, which allow eges to match multiple states. Here we have a widget that
moves to a location in response to a mouse click, with generic rule (@edge(*,
*)) performing a simple linear transition, and with some overriding rules for
specific transitions. This example also uses an attribute selector with the
attr() function to copy state set in a DOM attribute directly to a CSS state-
property. The specific overrides are: 

  <ol><li>Any transition to the top-left corner (@edge(*, 60-60)) will spin slightly and scale slightly.</li>
      <li>Transitions from top-right to top-left (@edge(540-60, 60-60)) will traverse the edges of the box.</li>
      <li>Transitions from bottom-left to top-right (@edge(60-540, 540-60)) will spin 720 degress.</li>
  </ol>

  Because the shortest-path algorithm is applied to explicit (i.e. non-generic)
path segments, transitions from bottom-left to top-left will make use of both
the third and second transition above rather than the general case
transition.</p>


      <div id="playground">
      <div id="topleft" class="corner"></div>
      <div id="topright" class="corner"></div>
      <div id="bottomleft" class="corner"></div>
      <div id="bottomright" class="corner"></div>
      <div id="hitTarget"></div>
      <div id="animation"></div>
      </div>

      <p>Here is the source for this example.</p>

      <div id="animation-style_excss" class="source"></div>

      <p>Mouse clicks are handled by a javascript function that sets the "left"
and "top" styles of the object directly, as well as setting the "position"
attribute on the object to left-top. All animation is entirely declarative.</p>

    <div id="navigation">
    </div>
    </section>
    </div>
  </body>
<script src="populate_source.js"></script>
<script src="../../css-events.js"></script>
<script src="excss_animation.js"></script>
<script src="http://experimental-css.googlecode.com/hg/excss.js" explicit="true"></script>
<script src="excss_parse_animation.js"></script>
<script type="text/javascript" src="http://google-code-prettify.googlecode.com/svn/trunk/src/prettify.js"></script>
<script type="text/javascript" src="http://google-code-prettify.googlecode.com/svn/trunk/src/lang-css.js"></script>
<script src="navButtons.js"></script>
<script>
prettyPrint();

var anim = document.querySelector("#animation");

document.querySelector("#playground").onclick = function(event) {
  var x = event.offsetX;
  var y = event.offsetY;
  if (x < 60) { x = 60; }
  if (x > 540) { x = 540; }
  if (y < 60) { y = 60; }
  if (y > 540) { y = 540; }
  anim.style["left"] = (x - 40) + "px";
  anim.style["top"] = (y - 40) + "px";
  anim.setAttribute("position", x + "-" + y);
}

anim.setAttribute("position", "60-60");

</script>
</html>
